<template>
  <div class="dashboard-container">
    <panel-group :panel-group-data="panelGroupData" />
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pie-chart :panel-group-data.sync="panelGroupData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDashboard } from '@/api/dashboard'
import PanelGroup from './components/PanelGroup'
import PieChart from './components/PieChart'
export default {
  name: 'Dashboard',
  components: { PanelGroup, PieChart },
  data() {
    return {
      panelGroupData: {
        server_count: undefined,
        network_count: undefined,
        sp_count: undefined,
        pieChartData: undefined
      }
    }
  },
  created() {
    this.getDashboardData()
  },
  methods: {
    getDashboardData() {
      getDashboard().then(response => {
        this.panelGroupData.server_count = response.data.server_count
        this.panelGroupData.network_count = response.data.network_count
        this.panelGroupData.sp_count = response.data.sp_count
        this.panelGroupData.pieChartData = response.data.server_type_data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: rgba(240, 242, 245, 0.589);
  position: relative;
  padding: 32px;
}
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
</style>
